class Snake {
    element: HTMLElement;
    head: HTMLElement;
    body: HTMLCollection;
    _direction = "right";
    life = true;
    _length = 1;
    constructor() {
        this.element = document.getElementById("snake") as HTMLElement;
        this.body = document.getElementById("snake")!.getElementsByTagName("div");
    }

    get X() {
        return this.head.offsetLeft;
    }

    get Y() {
        return this.head.offsetTop;
    }

    set X(x: number) {
        this.head.style.left = `${x}px`;
    }

    set Y(y: number) {
        this.head.style.top = `${y}px`;
    }

    set XY(xy: number[]) {
        this.head.style.left = `${xy[0]}px`;
        this.head.style.top = `${xy[1]}px`;
    }

    get direction() {
        return this._direction;
    }

    set direction(directions: string) {
        this._direction = directions;
    }
    get length() {
        return this._length;
    }

    get bodyXY(): Number[] {
        let XY = [];
        for (let i = 0; i < this.body.length; i++) {
            const element = this.body[i];
            XY.push([(element as HTMLElement).offsetLeft, (element as HTMLElement).offsetTop]);
        }
        return XY;
    }

    init() {
        this._direction = "right"
        this.element.innerHTML = "<div></div>";
        this.head = document.querySelector("#snake > div") as HTMLElement;
        this.life = true;
    }

    addBody() {
        this.element.insertAdjacentHTML("beforeend", "<div></div>");
        this._length++;
    }

    moveBody() {
        for (let i = this.body.length - 1; i > 0; i--) {
            const element = this.body;
            let x = (element[i - 1] as HTMLElement).offsetLeft;
            let y = (element[i - 1] as HTMLElement).offsetTop;
            (element[i] as HTMLElement).style.left = x + "px";
            (element[i] as HTMLElement).style.top = y + "px";
        }

    }
}
export default Snake;